<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" :inline="false">
      <el-form-item label="房产名称">
        <el-input v-model="hoursename" readonly />
      </el-form-item>
      <el-form-item label="事件类型" prop="eventtype">
        <el-input v-model="form.eventtype" :value="salestate" readonly/>
      </el-form-item>
      <el-form-item label="有无期限" prop="expire" v-if="isBaoLiu">
        <el-radio-group v-model="form.expire">
          <el-radio label="有期限" value="有期限"></el-radio>
          <el-radio label="无期限" value="无期限"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="期限时间" prop="expiretime" v-if="form.expire == '有期限' && isBaoLiu">
        <el-date-picker
          v-model="form.expiretime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择期限时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="操作人" prop="userid">
        <el-input v-model="form.userid" readonly/>
      </el-form-item>
      <el-form-item label="说明" prop="demo">
        <el-input type="textarea" v-model="form.demo" placeholder="说明"/>
      </el-form-item>
    </el-form>
    <div style="text-align: right;">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addHouseEvent } from "@/api/house_sale/HouseEvent";
import { updateSaleState } from "@/api/house_sale/salesGuide";

export default {
  name: 'HouseEventAdd',
  props: ["hourseid","hoursename","salestate"],
  data() {
    return {
      username: null,
      // 是否是保留事件
      isBaoLiu: false,
      // 表单参数
      form: {
        houseid: null,
        eventtype: null,
        expire: null,
        expiretime: null,
        userid: null,
        oprtime: null,
        demo: null,
        buyid: null
      },
      rules: {
        expiretime: [
          {required: (this.isBaoLiu && this.form.expire == '有期限'), message: '期限时间不能为空', trigger: "blur"}
        ],
      },
    }
  },
  created() {
    this.form.userid = this.$store.state.user.name;
    this.form.eventtype = this.salestate;
    this.isBaoLiu = this.salestate == '保留';
  },
  watch: {
    salestate() {
      this.form.userid = this.$store.state.user.name;
      this.form.eventtype = this.salestate;
      this.isBaoLiu = this.salestate == '保留';
    }
  },
  methods: {
    /** 提交按钮 */
  submitForm() {
    this.$refs["form"].validate(valid => {
      if (valid) {
        this.form.houseid = this.hourseid;
        var expire = '管理员[' + this.form.userid + ']将该房设为' + this.form.eventtype;
        if(this.isBaoLiu) {
          this.form.expire = expire + '(' + this.form.expire + ')';
        }

        var houseinfo = {hourseid: this.hourseid, salestate: this.salestate};
        updateSaleState(houseinfo).then(response => {
          if(response.data > 0) {
            this.$modal.msgSuccess("操作成功");
          } else {
            this.$modal.msgSuccess("操作失败");
          }
        });
        addHouseEvent(this.form).then(response => {
          this.$emit("next");
        });
      }
    });
  },
  }
}
</script>
